<template>
	<div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
			<!-- Header -->
			<div class="text-center mb-12">
				<h1 class="text-4xl font-bold text-gray-900 mb-4">
					<span class="text-gradient">生活工具</span>
				</h1>
				<p class="text-xl text-gray-600 max-w-3xl mx-auto">
					实时数据与小工具集合。以下为可用的实时工具。
				</p>
			</div>

			<!-- Tool Grid -->
			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
				<ToolCard
					v-for="tool in liveTools"
					:key="tool.id"
					:title="tool.name"
					:description="tool.description"
					:icon="tool.icon"
					:to="tool.path"
					:iconBgClass="tool.iconBgClass"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import ToolCard from '~/components/tools/ToolCard.vue'

const liveTools = [
	{
		id: 1,
		name: '每日羊毛',
		description: '每日羊毛优惠信息汇总',
		path: '/live-tools/yangmao',
		icon: 'M21 7.5V6a2 2 0 00-2-2H5a2 2 0 00-2 2v1.5M3 7.5V18a2 2 0 002 2h14a2 2 0 002-2V7.5M3 7.5h18',
		iconBgClass: 'bg-gradient-to-br from-pink-500 to-red-500'
	},
	{
		id: 2,
		name: '天气查询',
		description: '按省/市选择城市并查询实时天气与未来预报，数据来自 itboy 天气接口',
		path: '/live-tools/weather',
		icon: 'M3 15a4 4 0 004 4h8a4 4 0 100-8 5 5 0 10-9.9 1',
		iconBgClass: 'bg-gradient-to-br from-blue-500 to-indigo-600'
	},
	{
		id: 3,
		name: '生日祝福',
		description: '为朋友送上生日祝福，数据来自八八在线',
		path: '/live-tools/birthday',
		icon: 'M3 15a4 4 0 004 4h8a4 4 0 100-8 5 5 0 10-9.9 1',
		iconBgClass: 'bg-gradient-to-br from-blue-500 to-indigo-600'
	},
	{
		id: 4,
		name: '随机点名',
		description: '随机点名,老师上课好帮手',
		path: '/live-tools/random-names',
		icon: 'M3 15a4 4 0 004 4h8a4 4 0 100-8 5 5 0 10-9.9 1',
		iconBgClass: 'bg-gradient-to-br from-blue-500 to-indigo-600'
	},
	{
		id: 5,
		name: '在线打牌/麻将计分板',
		description: '支持扑克牌、麻将计分，支持自定义人数、整局数据存储与分享',
		path: '/live-tools/scoreboard',
		icon: 'M21 7.5V6a2 2 0 00-2-2H5a2 2 0 00-2 2v1.5M3 7.5V18a2 2 0 002 2h14a2 2 0 002-2V7.5M3 7.5h18',
		iconBgClass: 'bg-gradient-to-br from-pink-500 to-red-500'
	},
	{
		id: 6,
		name: '短网址生成器',
		description: '短网址存储与分享',
		path: '/live-tools/short-link',
		icon: 'M21 7.5V6a2 2 0 00-2-2H5a2 2 0 00-2 2v1.5M3 7.5V18a2 2 0 002 2h14a2 2 0 002-2V7.5M3 7.5h18',
		iconBgClass: 'bg-gradient-to-br from-pink-500 to-red-500'
	},
	{
		id: 7,
		name: '实时金价',
		description: '查询实时黄金价格（含涨跌），数据来自 free.xwteam.cn',
		path: '/live-tools/gold',
		icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2',
		iconBgClass: 'bg-gradient-to-br from-yellow-500 to-yellow-600'
	},
	{
		id: 8,
		name: '视力测试',
		description: '视力测试工具，帮助评估视力状况',
		path: '/live-tools/eye',
		icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2',
		iconBgClass: 'bg-gradient-to-br from-yellow-500 to-yellow-600'
	}
]

// SEO
useHead({
	title: '生活工具 - 八八在线工具',
	meta: [
		{ name: 'description', content: '实时生活工具：金价、天气查询等，均为在线工具。' },
		{ property: 'og:title', content: '生活工具 - 八八在线工具' },
		{ property: 'og:description', content: '实时生活工具：金价、天气查询等，均为在线工具。' }
	]
})
</script>

<style scoped>
.primary-button{
	background: linear-gradient(90deg,#4f46e5,#06b6d4);
	color: white;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	font-weight: 600;
}
</style>

